{% extends 'base.html' %}
{% block top-left-nav %}
    <ul class="nav minimalize-styl-2  navbar-top-links">
        <li style="color: green">操作系统：<span id="system"></span></li>
        <li style="margin-left:8px;color: #0d8ddb">系统启动时间：<span id="sys-time"></span></li>
    </ul>
{% endblock %}
{% block css %}
    <!-- c3 Charts -->
    <link href="/static/css/plugins/c3/c3.min.css" rel="stylesheet">

{% endblock %}
{% block content %}
    <div class="row  border-bottom white-bg dashboard-header">

        <div class="col-md-3">
            <div class="ibox-content">
                <h3>CPU使用率</h3>
                <div>
                    <div id="cpu" style="width: 320px;height: 320px;"></div>
                </div>
            </div>

        </div>
        <!-- 图表 -->
        <div class="col-md-3">
            <div class="ibox-content">
                <h3>内存使用率</h3>
                <div>
                    <div id="ram" style="width: 320px;height: 320px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="ibox-content">
                <h3>磁盘用量</h3>
                <div>
                    <div id="disk" style="width: 320px;height: 320px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="ibox-content">
                <h3>负载状态</h3>
                <div>
                    <div id="fz" style="width: 300px;height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">Web</span>
                        <h5>网站</h5>
                    </div>
                    <div class="ibox-content">0
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">FTP</span>
                        <h5>FTP</h5>
                    </div>
                    <div class="ibox-content">0
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">DB</span>
                        <h5>数据库</h5>
                    </div>
                    <div class="ibox-content">0
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-xs-3">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <h2 class="font-bold">217</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-xs-3">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <h2 class="font-bold">217</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-xs-3">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <h2 class="font-bold">217</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-xs-3">
                                <i class="fa fa-user fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <h2 class="font-bold">217</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div id="io-bytes" style="width: 800px;height: 400px"></div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script src="/static/js/plugins/echarts/echarts.min.js"></script>


    <script>
        option = {
            title: {
                text: '流量',
                subtext: '数据来自python',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    return params[0].name + '<br/>'
                        + params[0].seriesName + ' : ' + params[0].value + ' (kb/s)<br/>'
                        + params[1].seriesName + ' : ' + -params[1].value + ' (kb/s)';
                }
            },

            legend: {
                data: ['上传', '下载'],
                x: 'left'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    saveAsImage: {show: true}
                }
            },
            dataZoom: {
                show: true,
                realtime: true,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {onZero: false},
                    data: []// 放只横轴时间
                }
            ],
            yAxis: [
                {
                    name: '上传流量(kb/s)',
                    type: 'value',
                    max:10
                },
                {
                    name: '下载流量(kb/s)',
                    type: 'value',
                    max:10,
                    axisLabel: {
                        formatter: function (v) {
                            return -v;
                        }
                    }
                }
            ],
            series: [
                {
                    name: '上传',
                    type: 'line',
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: []  //放置上横轴 上传
                },
                {
                    name: '下载',
                    type: 'line',
                    yAxisIndex: 1,
                    itemStyle: {normal: {areaStyle: {type: 'default'}}},
                    data: (function () {
                        var oriData = []; //放置下横轴 下载
                        var len = oriData.length;
                        while (len--) {
                            oriData[len] *= -1;
                        }
                        return oriData;
                    })()
                }
            ]
        };

        cpu_option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: 'CPU',
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 0, name: 'CPU使用率'}]
                }
            ]
        };
        ram_option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: 'RAM',
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 0, name: '内存使用率'}]
                }
            ]
        };
        disk_option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['/', '其他']
            },
            series: [

                {
                    name: '根盘用量',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: [
                        {value: 0, name: '已使用'},
                        {value: 0, name: '未使用'},
                    ]
                }
            ]
        };

        fz_option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '负载',
                    type: 'gauge',
                    detail: {formatter: '{value}%'},
                    data: [{value: 0, name: '负载状态'}]
                }
            ]
        };
        $(function () {
            $.get("/index/api/v1/get-system-time/", {}, function (result) {
                if (result.code === 200) {
                    $("#system").text(result.data.system + result.data.version);
                    $("#sys-time").text(result.data.sys_time)
                }
            });
        });
        var cpuChart = echarts.init(document.getElementById('cpu'));
        var ramChart = echarts.init(document.getElementById('ram'));
        var diskChart = echarts.init(document.getElementById('disk'));
        var fzChart = echarts.init(document.getElementById('fz'));
        var ioChart = echarts.init(document.getElementById("io-bytes"));
        cpuChart.setOption(cpu_option, true);
        ramChart.setOption(ram_option, true);
        diskChart.setOption(disk_option, true);
        fzChart.setOption(fz_option, true);
        ioChart.setOption(option, false);
        // 定时执行 每两秒获取一次
        setInterval(function () {
            $.ajax({
                url: "/index/api/v1/get-system-info/",
                type: "GET",
                success: function (result) {
                    if (result.code === 200) {
                        data = result.data;
                        if (data.cpu) {
                            cpu_option.series[0].data[0].value = data.cpu;
                            cpuChart.setOption(cpu_option, true);
                        }
                        if (data.ram) {
                            ram_option.series[0].data[0].value = data.ram;
                            ramChart.setOption(ram_option, true);
                        }
                        if (data.disk) {
                            disk_option.series[0].data[0].value = data.disk.disk_used;
                            disk_option.series[0].data[1].value = data.disk.disk_free;
                            diskChart.setOption(disk_option, true);
                        }
                        if (data.io) {
                            option.xAxis[0].data.push(data.io.time);
                            // 放上传
                            option.series[0].data.push((data.io.sent / 1024) / 8);
                            option.series[1].data.push((data.io.recv / 1024) / 8);
                            ioChart.setOption(option, false)
                        }
                    } else {
                        swal("错误", "获取失败", "error")
                    }
                }

            });

        }, 2000);

    </script>
{% endblock %}